<template>
  <div class="content">
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      title="财务明细"
      fixed
    ></van-nav-bar>
    <div class="tabs">
      <van-tabs
        v-model="active"
        color="blue"
        @click="tabClick"
        sticky
        offset-top="46px"
      >
        <van-tab v-for="(item, index) in tabs" :key="index" :title="item.title">
          <div v-if="financialArr.length != 0">
            <van-list
              v-model="loading"
              :finished="finished"
              :immediate-check="false"
              @load="onLoad"
            >
              <div
                class="tabs-items"
                v-for="(items, indexs) in financialArr"
                :key="indexs"
              >
                <div class="title">
                  <span>{{ items.description }}</span>
                  <div class="dates">{{ items.gmtCreate }}</div>
                </div>
                <div class="center" v-if="items.status == 1">已完成</div>
                <div class="center" style="color: red" v-else>未完成</div>
                <div class="money">
                  <span
                    >{{
                      items.orderType == 2 || items.orderType == 3 ? "-" : "+"
                    }}
                    {{ items.amount }}</span
                  >
                </div>
              </div>
            </van-list>
          </div>
          <van-empty v-else description="暂无数据" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: "",
      tabs: [
        { id: 1, title: "全部" },
        { id: 3, title: "充值" },
        { id: 4, title: "提现" },
        { id: 2, title: "消费" },
        { id: 5, title: "收益" },
      ],
      isPower: 1,
      financialArr: [],
      loading: false, //加载状态
      finished: false, //完成
      page: 1, //页数
      limit: 8, //条数
      totalPage: 100, //总页数
    };
  },
  created() {
    document.querySelector("html").style.backgroundColor = "#f3f5f7";
    document.querySelector("body").style.backgroundColor = "#f3f5f7";
  },
  async mounted() {
    await this.isCustomer();
    this.financialDetail();
  },
  methods: {
    //触底下一页
    onLoad() {
      if (this.page >= this.totalPage) {
        this.finished = true;
        return;
      }
      this.page++;

      this.financialDetail();
      // 加载状态结束
      this.loading = false;
    },
    //标题点击
    tabClick() {
      this.financialDetail();
    },
    //获取财务明细
    async financialDetail() {
      var userType;
      var userId;
      if (this.isPower == 1) {
        userType = 2;
        userId = this.$store.state.userInfo.account;
      } else {
        userId = this.$store.state.userInfo.id;
        userType = 1;
      }

      let obj = {
        userId,
        userType,
        page: this.page,
        limit: this.limit,
      };
      if (this.active !== 0) {
        obj.type = this.active;
        if (this.active == 4) {
          obj.type = 5;
        }
      }
      let res = await this.$api.financialDetail(obj);
      if (res.code !== 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.financialArr = res.data.records || [];
      } else {
        this.financialArr.push(...res.data.records);
      }
      this.totalPage = res.data.pages;
    },
    //判断是否有权限创建
    async isCustomer() {
      let userWxData = JSON.parse(sessionStorage.getItem("userWxData"));
      let account = sessionStorage.getItem("agentId");
      let res = await this.$api.isCustomer({
        openId: userWxData.openid,
        account,
        id: this.$store.state.userInfo.id,
      });
      this.isPower = res.data;
    },
  },
};
</script>
<style lang="less" scoped>
.tabs {
  padding-top: 46px;
}
.tabs-items {
  width: 90%;
  height: auto;
  background: #fff;
  display: flex;
  margin: 20px;
  padding: 10px;
  line-height: 30px;
  justify-content: space-between;
  font-size: 14px;
  .title {
    width: 135px;
  }
  .dates {
    color: #999;
  }
  .center {
    font-size: 12px;
    color: #1aa034;
  }
  .money {
    color: #ff2d39;
    width: 50px;
    display: flex;
    align-items: center;
  }
}
</style>
